<template>
  <view class="container">
    <!-- :title="'首页'" -->
    <cunstom_navigation_bar_input :propStyles="propStyles" :title="'厨娘'">
    </cunstom_navigation_bar_input>
    <view class="contentBox">

      <view class="icons">
        <view v-for="(item,index) in iconArr" class="iconBox">
          <image  :src="'https://visionmpapi.jiuerjindi.com/upload/mp/index/'+(index+1)+'.png'"></image>
          <!-- <image :src="require('https://visionmpapi.jiuerjindi.com/upload/mp/index/'+(index+1)+'.png')"></image> -->

          <span>{{item.name}}</span>
        </view>
      </view>
      <view class="bar">
        <view class="contain">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/index/info.png"></image>
          <image @tap="jumpUrl('/pages/cookZone/cookZone',true)" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/cook.png"></image>
        </view>

      </view>
      <view class="mouduleLine">
        <view class="mouduleBox">
          <!-- <view v-for="">{{}}</view>
          <view class="moudule" :class="selectedIndex == index?'selected':''" v-for="(item,index) in mouduleTypes"
            @tap="changeIndex(index)">
            {{item.name}}
          </view>
		   -->
		  
		  <view  class="moudule" :class="selectedIndex == item.id?'selected':''"  v-for="(item,index) in categoryList"
		    @tap="changeIndex(item.id)">
		  	{{ item.name }}
		  </view>
		  

        </view>

      </view>
      <view class="typesLine">
		<!--
        <view class="typesBox">
          <view v-for="(item,index) in 6">
            <image :src="'https://visionmpapi.jiuerjindi.com/upload/mp/index/recommend ('+(index+1)+').png'"></image>
          </view>
		 
        </view>
		-->
      </view>
      <view class="productList">
        <view v-for="(item,index) in productData " class="productBox"
          @tap="jumpUrl('/page_productDetail/productDetail?mallProductId='+item.mallProductId)">
          <view class="imgBox" @tap=showItemDetail(item)>
            <image class="productImg" :src="item.goods_img"></image>
            <image class="likePng" v-if="item.liked" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/liked.png">
            </image>
            <image class="likePng" v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/index/noLike.png"></image>

          </view>
          <view class="infoBox">
            <view class="productName">
              {{item.goods_name}}
            </view>
            <view class="line2">
              <view class="price">
                {{item.offline_price}}
              </view>
              <view class="type">
                {{ getTypeName(item.category_id) }}
              </view>

            </view>
            <view class="line3">
              <view class="left">
                <view class="discountPrice">
                  ￥{{item.member_price}}
                </view>
				<!--
                <view class="type">/kg</view>
				-->
              </view>
              <view class="right" @tap="addCart(item)">

                <image src="https://visionmpapi.jiuerjindi.com/upload/mp/index/addCart.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="noProuct" v-if="productData.length == 0">
          暂无匹配商品
        </view>
      </view>
	  
	  <!--
      <view class="cookHome">
        <view class="title">
          <view class="l">厨娘之家</view>
          <view class="r">更多 ></view>
        </view>
        <view class="contentList">
          <view v-for="(item,index) in cookInfoData" class="dataBox">
            <view class="personInfo">
              <view class="left">
                <image class="headPicture" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/headPicture.png">
                </image>
              </view>
              <view class="right">
                <view class="line1">
                  <view class="nickName">{{item.nickName}}</view>
                  <view>
                    <image v-if="item.gender==0" class="genderImg" mode="widthFix"
                      src="https://visionmpapi.jiuerjindi.com/upload/mp/index/gender0.png">
                    </image>
                    <image v-else class="genderImg" mode="widthFix"
                      src="https://visionmpapi.jiuerjindi.com/upload/mp/index/gender1.png"></image>
                  </view>
                </view>
                <view class="line2">
                  {{item.age}}·{{item.addr}}
                </view>
              </view>
            </view>
            <view class="text">
              {{item.text}}
            </view>
            <view class="tag">
              #{{item.tag}}
            </view>
            <view class="media">
              <image class="uploadImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/uploadImg.png"
                mode="widthFix"></image>

            </view>
            <span class="hashTag">
              #{{item.hashTag}}
            </span>
            <view class="iconsLine">
              <view class="eachBox">
                <image v-if="item.hasLiked" class="icon"
                  src="https://visionmpapi.jiuerjindi.com/upload/mp/index/likes_yes.png"></image>
                <image v-else class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/likes_no.png">
                </image>
                <text>{{item.liked}}</text>
              </view>
              <view class="eachBox">
                <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/share.png"></image>
                <text>{{item.share}}</text>
              </view>
              <view class="eachBox">
                <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/comment.png"></image>
                <text>{{item.comment}}</text>
              </view>
              <view class="eachBox">
                <image v-if="item.hasCollect" class="icon"
                  src="https://visionmpapi.jiuerjindi.com/upload/mp/index/collection_yes.png"></image>
                <image v-else class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/collection_no.png">
                </image>
                <text>{{item.collection}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
		-->
    </view>
    <view class="cart" v-if="cartList.length>0">
      <view class="left"   @tap="showCart()">
        <view class="cartImg" @tap="showCartDetail=true">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/index/cart.png"></image>
          <view class="cartNumber">{{cartNumber}}</view>
        </view>
        <view class="price">
          <span>￥</span>
          {{ cartTotal }}
        </view>

      </view>
      <view class="right"  @tap="addShopOrderAdd">去支付</view>
    </view>
    <scroll-view style="height: 100vh;    position: fixed; top: 0rpx;" v-if="showCartDetail">
    <view class="cartDetailMask"   v-if="showCartDetail">
      <view class="cartMask" @tap="showCartDetail=false"></view>
      <view class="cartDetail">
        <view class="head">
          <span>购物车</span>
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/index/cartClose.png" @tap="closeCart"></image>
        </view>
        <view class="addressBox">
          <view class="line1" @tap="selectPickupPoint"  v-if="pointSelect">
            <image class="shop" :src="imgUrl + pointSelect.image"></image>
            <span class="shopName">{{pointSelect.name}} ></span>
          </view>
          <view class="line2"  v-if="pointSelect">
            {{pointSelect.address}}
          </view>
		  
		  <view class="line2"  v-else  @tap="selectPickupPoint">
		    <span class="shopName">请选择自提点 ></span>
		  </view>
		  
          <view class="line3" v-if="pointSelect">明天16:00可取货</view>
		  
          <view class="line4" @tap="selectAddress">
            <image class="shop" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/personIcon.png"></image>
            <span class="shopName" v-if="addressSelect.realname">{{addressSelect.realname}}   {{addressSelect.mobile}}></span>
            <span class="shopName" v-else >请选择用户信息 ></span>
          </view>

        </view>
        <view class="tabs">
          <view :class="cartSelected==0?'all selected':'all'">全部（{{ cartNumber }}）</view>
		  <!--
          <view :class="cartSelected==1?'all selected':'all'">降价（2）</view>
		  -->
        </view>
        <view class="products">
          <view class="eachProduct" v-for="(item,index) in cartList">
            <image class="pic" :src=" item.goods.goods_img "></image>
            <view class="right">
              <view class="nameLine">{{item.goods.goods_name}}</view>
              <view class="price">￥ {{item.goods.member_price}}<span>/ kg</span></view>
              <view class="disc">RMB {{item.goods.line_price}}<view class="label">优惠</view>
              </view>
            </view>
            <view class="numLine">
              <view class="add" @tap="removeCart(item)">-</view>

              <view class="currentNum">
                {{item.num}}

              </view>
              <view class="subtraction" @tap="addCart(item)">+</view>
            </view>
          </view>
 
      
          <view class="borderLine"></view>
          <view class="bottom">
            <view class="left" @tap="showCartDetail=false">
              <image class="cartFull" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/cartFull.png"></image>
              <span class="grey">已选{{cartList.length}}</span>
              <view class="price"><span>￥</span>{{ cartTotal }}</view>
            </view>

            <view class="right" @tap="addShopOrderAdd">立即支付</view>
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
    <scroll-view style="height: 100vh;    position: fixed; top: 0rpx;" v-if="showDetail">
 
      <view class="mask" >
        <view class="topMask" @tap="showDetail=false"></view>
        <view class="productDetail">

          <view class="scrollBox">
            <image class="goodsImg" :src="itemDetail.goods_img"></image>
            <view class="goodsInfo">
              <view class="left">
                <view class="price"> <span>￥</span>{{itemDetail.member_price}}</view>
				<!--
                <view class="type">净菜</view>
				-->
              </view>
              <view class="right">
                <view class="saleVolume">近期已售0w+</view>
                <view class="numLine">
                  <view class="add" @tap="removeCart(itemDetail)">-</view>

                  <view class="currentNum" >
                    {{ itemDetail.num}}

                  </view>
                  <view class="subtraction" @tap="addCart(itemDetail)">+</view>
                </view>
              </view>
            </view>
            <view class="goodsInfo1">
              <view class="line1">
                <view class="name">{{  itemDetail.goods_name}}</view>
                <view class="addr"> 9幢路边金杯车取货，明天16:00送达自提点</view>
              </view>
              <view class="line2">
                价格保护 · 7天无理由退货 · 闪电退款 · 缺退货
              </view>
            </view>
			<!--
            <view class="comments">
              <view class="line1">
                <view class='left'>用户评价（好评度92%）</view>
                <view class="right">96条评论></view>
              </view>
              <view class="line2">
                <view class="type yellow">有图12</view>
                <view class="type yellow">
                  <image class="goodsImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/like.png"></image>
                  86
                </view>
                <view class="type grey">
                  <image class="goodsImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/unlike.png"></image>
                  5
                </view>
              </view>
              <view class="line3">
                <view class="comment">
                  <view class="left">
                    <image class="headportrait"
                      src="https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png">
                    </image>
                    <view class="center">
                      <view class="name">别致小东西</view>
                      <view class="likeBox">
                        <image class="like" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/like.png"></image>
                        了该商品
                      </view>
                      <view class="text"></view>
                    </view>
                  </view>
                  <view class="right">2024-07-14</view>
                </view>
                <view class="comment second">
                  <view class="left">
                    <image class="headportrait"
                      src="https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png">
                    </image>
                    <view class="center">
                      <view class="name">别致小东西</view>
                      <view class="likeBox">
                        <image class="like" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/like.png"></image>
                        了该商品
                      </view>
                      <view class="text">今天菜里肉有点咸了哦</view>
                    </view>
                  </view>
                  <view class="right">2024-07-14</view>
                </view>
              </view>
              <view class="line4">
                96条评论 >
              </view>
            </view>
            <view class="questions">
              <view class="line1">
                <view class="left">问大家<span>（4）</span></view>
                <view class="right">查看全部></view>
              </view>
              <view class="line2">
                <view class="question">
                  <view class="left">
                    <image class="wen" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/wen.png"></image>
                    <span>请问一下，西蓝花新鲜吗？</span>
                  </view>
                  <view class="right">11个问答</view>

                </view>
                <view class="question">
                  <view class="left">
                    <image class="wen" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/wen.png"></image>
                    <span>请问一下，西蓝花新鲜吗？</span>
                  </view>
                  <view class="right">11个问答</view>

                </view>
              </view>
            </view>
			-->
            <view class="details">
              <view class="line1">商品详情</view>
			  <!--
              <view class="line2">
                <view class="detail">
                  <span class="name">产地</span>
                  <span class="value">甘肃</span>
                </view>
                <view class="detail">
                  <span class="name">规格</span>
                  <span class="value">360g~440g/份</span>
                </view>
                <view class="detail">
                  <span class="name">保质期</span>
                  <span class="value">3天</span>
                </view>
                <view class="detail">
                  <span class="name">温度</span>
                  <span class="value">常温</span>
                </view>
              </view>
			  -->
            </view>
            <view class="images">
               <image class="" mode="widthFix" :src="itemDetail.goods_img"  ></image>
            </view>
            <view class="zhanwei"></view>
          </view>

        </view>
      </view>
    </scroll-view>
    <view class="zhanwei"></view>
    <tab_bar :current-page="0" ref='tabBar'></tab_bar>
  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();
  var QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
  const mapChange = require('@/utils/mapChange.js');

  // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
  export default {
    data() {
      return {
        cartSelected: 0,
        showCartDetail: false,
        cartNumber: 0,
        showDetail: false,
        currentNum: 1,
        productNum: 1,
        couponInfo: {},// 优惠券信息
        picData: [],
        codeId: '',
        openId: '',
        avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
        hasLogin: false,
        indicatorDots: false,
        selectedIndex: 0,
        cookInfoData: [
          {
            nickName: 'charlotte',
            gender: 0,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'image',
            hashTag: '做饭',
            liked: 20,
            hasLiked: true,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: true
          },
          {
            nickName: '中华小当家',
            gender: 1,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'image',
            hashTag: '做饭',
            liked: 20,
            hasLiked: true,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: false

          }, {
            nickName: 'mark',
            gender: 0,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'video',
            hashTag: '做饭',
            liked: 20,
            hasLiked: false,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: true

          }
        ],
        productData: [
		  /*
          {
            name: '西蓝花',
            price: '18.00',
            discountPrice: '12.00',
            unit: 'kg',
            type: '净菜',
            liked: false
          },
          {
            name: '空心菜',
            price: '5.00',
            discountPrice: '4.50',
            unit: '500g',
            type: '净菜',
            liked: false
          },*/
         
        ],
        iconArr: [
          {
            name: '分类',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '生活充值',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '今日推荐',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '家政服务',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '优惠活动',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '本地商家',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '厨娘入驻',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },

          {
            name: '教做菜',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '门店网点',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
          {
            name: '厨娘之家',
            url: '/pages/mall/mall',
            isTabPage: true,
            imgUrl: '',
            mustLogin: false
          },
        ],



        imgUrl: '',
        mouduleTypes: [
          {
            name: '推荐'
          },
          {
            name: '毛菜'
          },
          {
            name: '净菜'
          },
          {
            name: '套餐'
          },
          {
            name: '更多 >'
          },
        ],

        queryParams: {
          "modulesId": '', //模块id
          "mallProductName": '', //商品名称
          "pageNum": 1, //页数
          "pageSize": 200 //每页数量
        },
        propStyles: {
          // scan: true
          zhanweiColor: '#FFFFFF',
          txtColor: '#333333',
          bgColor: '#FECF01',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
        longitude: '',
        latitude: '',
		categoryList: [],
		cartList:[],
		cartTotal: 0,
		itemDetail: null,
		addressSelect: null, // 地址
		pointSelect: null, // 自提点
      };
    },

    methods: {
	  //
	  /*
	  addCart(item){
		  let index = -1;
		  for(let i=0;i<this.cartList.length;i++){
		  	if(this.cartList[i].goods_id == item.goods_id){
		  		this.cartList[i].nums += 1;
				index = 0;
		  	}
		  }
		  console.log("-> index:" + index);
		  if(index ==-1){
			item.nums = 1; 
			this.cartList.push(item);
		  }
		  this.getCartNumber();
	  },
	  removeCart(item){
		  let index = -1;
		  for(let i=0;i<this.cartList.length;i++){
			  if(this.cartList[i].goods_id == item.goods_id){
				  this.cartList[i].nums -= 1
				  if(this.cartList[i].nums <=0){
					  index = i;
					  break;
				  }
			  }
		  }
		  if(index!=-1){
			this.cartList.splice(index,1);
		  }
		  this.getCartNumber();
	  },
	  getCartNumber(){
		  this.cartNumber = 0;
		  this.cartTotal = 0;
		  for(let i=0;i<this.cartList.length;i++){
			this.cartNumber += this.cartList[i].nums;
			this.cartTotal +=  this.cartList[i].nums * this.cartList[i].member_price ;
		  }
	  },
	  */
	  showItemDetail(item){
		this.showDetail = true;
		this.itemDetail = item;
		this.itemDetail.num = 0;
		for(let i=0;i<this.cartList.length;i++){
			if(this.cartList[i].goods_id == item.goods_id){
				this.itemDetail.num = this.cartList[i].num;
			}
		}
		
	  },
	  addCart(item){
		 let params = {goods_id: item.goods_id,num:1};
		 util.request(api.addCart, params
		   , 'GET', 'application/json').then(res => {
		     if (res.code == 200) {
		       this.getCartList();
			   this.itemDetail.num = parseInt(this.itemDetail.num) + 1;
			   console.log("-> this.itemDetail:"+ JSON.stringify(this.itemDetail));
		     }
		   }).catch((err) => {
		     console.log('err', err)
		 
		   });
	  },
	  removeCart(item){
		  let index = -1;
		  for(let i=0;i<this.cartList.length;i++){
		  		if(this.cartList[i].goods_id == item.goods_id){
		  			this.cartList[i].num = parseInt(this.cartList[i].num) - 1;
		  			if(this.cartList[i].num <=0){
		  				index = i;
		  				break;
		  			}
		  		}
		  }
		  
		  console.log("-> index:"+ index);
		  if(index!=-1){	
		  	this.deleteCart(item.goods_id);	
		  }else{
			this.updateCart(item.goods_id, item.num);
		  }
	  },
	  getCartNumber(){
		  this.cartNumber = 0;
		  this.cartTotal = 0;
		  for(let i=0;i<this.cartList.length;i++){
		  		this.cartNumber += parseInt(this.cartList[i].num);
		  		this.cartTotal +=  parseInt(this.cartList[i].num) * parseFloat( this.cartList[i].goods.member_price) ;
		  }
	  },
	  deleteCart(id){
		let params = {goods_id: id};
		util.request(api.deleteCart, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
		       this.getCartList();
		    }
		
		  }).catch((err) => {
		    console.log('err', err)
		
		  });  
	  },
	  updateCart(id,num){
		let params = {goods_id: id,num: num};
		util.request(api.updateCart, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
		       this.getCartList();
		    }
		
		  }).catch((err) => {
		    console.log('err', err)
		
		  });  
	  },
	  getCartList(){
		  let params = {};
		  util.request(api.getCartList, params
		    , 'GET', 'application/json').then(res => {
		      if (res.code == 200) {
		        this.cartList = res.data.data;
				this.getCartNumber();
		      }
		  
		    }).catch((err) => {
		      console.log('err', err)
		  
		    });
	  },
	  
	  //
	  closeCart(){
	    this.showCartDetail = false;
	  },
      // 购买数量
      changeCurrentNum(num) {
        this.currentNum = this.currentNum + num;
        if (this.currentNum <= 1) {
          this.currentNum = 1;
        }
        this.price = this.typeList[this.currentType].price * this.currentNum;
      },
      changeIndex(index) {
        this.selectedIndex = index
		if(index==1){
			this.getShopGoodsList();
		}else{
			this.getShopGoodsList(index);
		}
      },
      closeInvitate() {
        this.$refs.popUpCoupon.close();
      },

      // 是否可以领证 0否 1是
      receiveStatus(status) {
        if (status == 1) {
          return '可领证'
        }
        // else if (status == 3) {
        //   return '已领证'
        // }
      },
      jumpTo(url, isTabPage, mustLogin) {
        console.log('首页手机号~~', app.globalData.phone);
        if (mustLogin && !app.globalData.phone) {
          //去登录授权
          uni.navigateTo({
            url: `/page_login/login?from=myInfo`,
          })
          return
        }
        if (!url) {
          util.toast('敬请期待~')
          return
        }
        console.log('1111');
        if (isTabPage) {
          console.log('2222');
          uni.switchTab({
            url: `${url}`,
          })
        } else {
          console.log('333');
          uni.navigateTo({
            url: `${url}`
          })
        }
      },

      getTopicPic() {
        util.request(api.selectTopicPic,
          { type: 1 }
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.picData = res.data
              console.log('this.picData.length~~', this.picData.length);

              if (this.picData.length > 1) {
                this.indicatorDots = true
              }
            } else {
              util.toast('查询失败')
            }
          }).catch((err) => {
            console.log('err', err)
          });
      },
      jumpUrl(url,isTab) {
        if (isTab ) {
          uni.switchTab({
          url:  url
        })
        } else{
          uni.navigateTo({
            url:  url,
          });
        } 
      },

      animationfinish(e) {

        let getTimestamp = new Date().getTime();
        if (e.detail.current == 0) {
          this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
        } else if (e.detail.current == 1) {
          this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
        } else if (e.detail.current == 2) {
          this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
        }
      },
      nextStep: function () {
        if (this.hasLogin) {
          //扫码
          this.scanFun()
        } else {
          uni.navigateTo({
            url: `/page_login/login`,
          })
        }
      },
      // 获取微信code，并后台登录
      loginByWeixin: function () {
        var that = this;
        let code = null;
        console.log('登录信息~~~111');
        return new Promise(function (resolve, reject) {
          return util.login().then((res) => {
            code = res.code;
            console.log("->获取微信code:" + code);
          }).then(() => {
            util.request(api.wxmp_login, {
              appid: 'wx3c436f072b29ecc7',
              code: code
            }, 'GET', 'application/json').then(res => {
              if (res.code === 200) {
                //存储用户信息
                //that.openId = res.data.openid;
                app.globalData.token = res.data.token;
                app.globalData.user = res.data.user;
                // that.queryUserinfo()
                // 获取用户信息 getUserInfo
                util.setToken(res.data.token);

			console.log("=============存储用户信息================");
	  // 
	  that.getShopCategoryList();
	  that.getCartList();

                resolve(res);
              } else {
                reject(res);
				// 登录 
				/*
				uni.navigateTo({
				    url: `/page_login/login`
				}) 
				*/
              }
            }).catch((err) => {
              reject(err);
            });
          }).catch((err) => {
            reject(err);
          })
        });
      },

      getLocation() {
        console.log('进入getLocation')
        var _this = this
        const tMap = new QQMapWX({
          key: 'K32BZ-KFUCZ-5R4XG-TDTHQ-K4HRS-HMB3M' //开发者密钥
        });

        uni.getLocation({
          type: 'wgs84',
          geocode: true,
          success: (res) => {
            console.log("获取经纬度成功");
            const re = mapChange.wgs84Togcj02(res.longitude, res.latitude)
            console.log('经纬度~~', re)
            _this.longitude = re[0]
            _this.latitude = re[1]
            app.globalData.longitude = re[0]
            app.globalData.latitude = re[1]
          },
          fail: () => {
            console.log("获取经纬度失败");
          },
          complete: () => {
            tMap.reverseGeocoder({
              location: {
                latitude: _this.latitude,
                longitude: _this.longitude
              },
              success: function (res) {
                console.log("解析地址成功", res);
                console.log("当前地址：", res.result.address);
                app.globalData.address = res.result.address;

                app.globalData.city = res.result.address_component.city;
                app.globalData.district = res.result.address_component.district;
                app.globalData.province = res.result.address_component.province;

              },
              fail: function (res) {
                uni.showToast({
                  title: '定位失败',
                  duration: 2000,
                  icon: "none"
                })
                console.log(res);
              },
              complete: function (res) { //无论成功失败都会执行
                console.log('获取定位信息')
                return
                uni.openLocation({
                  latitude: _this.latitude,
                  longitude: _this.longitude,
                  success: function () {
                    console.log('success');
                  }
                });
              }
            })
          }
        })
      },
	  // 获取商品类型
	  getShopCategoryList(){
		  let params = {page: 1, limit: 1000 };
		  util.request(api.shopCategoryList, params
		    , 'GET', 'application/json').then(res => {
		      if (res.code == 200) {
				  this.categoryList = res.data.data;
				//
				this.getShopGoodsList();
		      }
		  
		    }).catch((err) => {
		      console.log('err', err)
		  
		    });
	  },
	  // 商品列表
	  getShopGoodsList(id){
		  let params = {page: 1, limit: 1000 };
		  if(id){
			  params.category_id = id;
		  }
		  let that = this;
		  util.request(api.shopGoodsList, params
		    , 'GET', 'application/json').then(res => {
		      if (res.code == 200) {
		  		this.productData = res.data.data;
		      }
		  
		    }).catch((err) => {
		      console.log('err', err)
		  
		    });
	  },
	  getTypeName(id){
		let name = '';
		this.categoryList.forEach(v=>{
			// console.log("id:"+ id+",v.id:"+v.id);
			if(v.id == id ){
				name = v.name;
			}
		});  
		return name;
	  },
	  selectAddress(){
		  uni.navigateTo({
		      url: `/page_myAddress/myAddress?id=null&type=index`
		  }) 
	  },
	  selectPickupPoint(){
		  uni.navigateTo({
		      url: `/page_pickupPoint/pickupPoint?id=null&type=index`
		  }) 
	  },
	  // 添加订单
	  addShopOrderAdd(){
		let cart_ids = this.cartList.map(obj => obj.id).join(',');
		console.log("->this.cartList:"+ JSON.stringify(this.cartList));
		console.log( "->cart_ids:"+ cart_ids);
		  
		let params = { 
			cart_ids : cart_ids,
			receiver: this.addressSelect.realname,
			address: this.addressSelect.address,
			longitude: app.globalData.longitude,
			latitude: app.globalData.latitude,
			phone: this.addressSelect.mobile,
			amount: this.cartTotal,
			user_memo: '',
			
		};
		let that = this;
		util.request(api.shopOrderAdd, params
		  , 'POST', 'application/x-www-form-urlencoded').then(res => {
		    if (res.code == 200) {
				//that.cartList = [];
				//that.cartTotal = 0;
				
				let payParams = {
					order_id : res.data.id,
					type : 'shop',
					receiver: that.addressSelect.realname,
					address: that.addressSelect.address,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude,
					phone: that.addressSelect.mobile,
					amount: that.cartTotal,
				} 
				
				// 
				util.request(api.cookPaySFT, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						
						let outTradeNo = res.data.outTradeNo;
						
						uni.requestPayment({
						  //provider: 'wxpay',
						  timeStamp: res.data.timeStamp,
						  nonceStr: res.data.nonceStr,
						  package: res.data.package,
						  // signType: 'MD5',
						  signType: res.data.signType,
						  paySign: res.data.paySign,
						  success: function (res) {
						    //支付成功，跳转完成支付订单详情页
						    console.log('success:' + JSON.stringify(res));
							wx.navigateTo({
							    url:'page_myOrder/shopOrderDetail?orderSn='+outTradeNo, 						  
							})
						  },
						  fail: function (err) {
						    console.log('fail:' + JSON.stringify(err));
						    //支付不成功，跳转未支付订单详情页
							wx.navigateTo({
							    url:'page_myOrder/shopOrderDetail?orderSn='+outTradeNo, 						  
							})
						  }
						});
						
					 /*
					   wx.navigateTo({
					         url:'../out/out', 
					         success:function() {
								
					         },       
							 //成功后的回调；
					         fail:function() { },         //失败后的回调；
					         complete:function() { }      //结束后的回调(成功，失败都会执行)
					    })
					  */	
					}
				});
		    }
		}).catch((err) => {
			console.log('err', err)
		});   
	  }


    },

    mounted() {

    },
    created() {

    },
    onLoad: function (option) {

      this.imgUrl = process.env.VUE_APP_BASE_URL;
	  
	  /**/
      uni.navigateTo({
        // url: '/page_cookSide/addMenu',
        url: '/page_cookSide/cookSide',
        // url: '/page_notice/notice',
      })


	  // 获取坐标
	  // this.getLocation();
	  // 微信登录
	  this.loginByWeixin();



    },
    onUnload() {

    },
    onShow: function () {
      uni.hideTabBar()
      this.$refs.tabBar.changeCurrentPage(0)
	  // 地址
	  this.addressSelect = uni.getStorageSync('addressSelect');
	  // 自提点
	  this.pointSelect = uni.getStorageSync('pointSelect'); 
	  console.log("-> this.pointSelect:"+ JSON.stringify(this.pointSelect));
    },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background-color: #FFFFFF !important;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #FFFFFF !important;
  }


  .contentBox {
    .icons {
      width: 100%;
      height: 350rpx;
      background-color: #FECF01;
      display: flex;
      flex-wrap: wrap;
      padding: 32rpx;
      justify-content: space-around;
      flex-direction: column;
      border-radius: 0rpx 0rpx 30rpx 30rpx;
    }

    .iconBox {
      display: flex;
      flex-direction: column;
      height: 50%;
      align-items: center;


      image {
        width: 84rpx;
        height: 84rpx;
      }

      span {
        font-weight: 500;
        font-size: 10px;
        color: #333333;
        margin-top: 14rpx;
      }
    }

    .bar {
      background-color: #f4f4f4;
      width: 100%;
      height: 350rpx;
      position: relative;
      display: flex;
      justify-content: center;

      .contain {
        display: flex;
        position: absolute;
        top: -24rpx;
        width: 700rpx;
        justify-content: space-around;
        align-items: center;
        height: 350rpx;
        background: #fff;
        border-radius: 30rpx;

        image {
          width: 304rpx;
          height: 304rpx;
        }
      }
    }

    .mouduleLine {
      width: 100%;
      overflow-x: scroll;
      padding-top: 36rpx;
      margin-bottom: 36rpx;
      background: #FFF;

      .mouduleBox {
        display: flex;
        justify-content: space-between;
        padding: 0rpx 28rpx 0rpx 28rpx;
		gap: 28rpx;

        .moudule {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          /* color: #999999; */
          color: rgba(51, 51, 51, 0.6);
          height: 55rpx;
          white-space: nowrap;
          text-align: center;
		  box-sizing: border-box; /* 确保 padding/border 不会影响元素的总高度 */
        }

        .selected {
          border-bottom: 6rpx solid #FECF01;
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          height: 60rpx;
        }
      }
    }

    .typesLine {
      width: 100%;
      overflow-x: scroll;
      background: #FFF;
      margin: 32rpx 0rpx;
      .typesBox {
        display: flex;

        image {
          width: 94rpx;
          height: 94rpx;
          margin-left: 36rpx;
        }

      }
    }

    .productList {
      width: 100%;
      padding: 0rpx 24rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #f4f4f4;

      .productBox {
        width: 163*2rpx;
        height: 257*2rpx;
        margin-bottom: 15*2rpx;
        background: #FFF;

        .imgBox {
          width: 163*2rpx;
          height: 163*2rpx;
          position: relative;

          .productImg {
            width: 163*2rpx;
            height: 163*2rpx;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
          }

          .likePng {
            width: 32*2rpx;
            height: 31*2rpx;
            position: absolute;
            right: 16rpx;
            top: 16rpx;
          }
        }



        .infoBox {
          padding: 0rpx 26rpx 0rpx 30rpx;
          /* padding: 15rpx 20rpx 0rpx 20rpx;
                    background: #ffffff;
                    height: 162rpx;
                    position: relative; */

          .productName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            margin: 20rpx 0rpx;
            font-size: 28rpx;
            font-weight: 500;

            width: 100%;
            /* height: 80rpx; */

            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;


          }

          .line2 {
            display: flex;
            align-items: center;

            .price {
              color: #BDBDBD;
              font-size: 22rpx;
              margin-right: 32rpx;
              font-weight: 500;
              text-decoration: line-through;
            }

            .type {
              width: 33.4*2rpx;
              height: 16.57*2rpx;
              border-radius: 5*2rpx;
              color: #D93F11;
              font-size: 20rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              font-weight: 500;
              background: rgba(217, 63, 17, 0.15);
            }
          }

          .line3 {
            display: flex;
            justify-content: space-between;

            .left {
              align-items: center;
              display: flex;

              .discountPrice {
                font-size: 26rpx;
                font-weight: bold;
                color: #333333;
                margin-right: 32rpx;
              }

              .type {
                color: #828282;
                font-size: 20rpx;
              }
            }

            .right {
              image {
                width: 28*2rpx;
                height: 29*2rpx;
              }
            }
          }

        }
      }

      .noProuct {
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333333;
      }
    }

    .cookHome {
      .title {
        display: flex;
        justify-content: space-between;
        padding: 40rpx 30rpx 32rpx;

        .l {
          font-size: 36rpx;
          font-weight: 500;
          color: #333333;
        }

        .r {
          color: rgba(51, 51, 51, 0.8);
          font-size: 36rpx;
        }
      }

      .contentList {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .dataBox {
          box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
          width: 355*2rpx;
          min-height: 353*2rpx;
          padding: 44rpx 28rpx;
          margin-bottom: 20rpx;
          border-radius: 30rpx;
        }

        .personInfo {
          display: flex;

          .left {
            margin-right: 34rpx;

            .headPicture {
              width: 72*2rpx;
              height: 73*2rpx;
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .line1 {
              display: flex;

              .nickName {
                font-size: 32rpx;
                font-weight: 500;
                color: #333333;
                margin-right: 16rpx;
              }

              .genderImg {
                width: 20rpx;

              }
            }

            .line2 {
              margin-top: 14rpx;
              color: rgba(51, 51, 51, 0.6);
              font-size: 24rpx;
            }
          }
        }

        .text {
          font-size: 28rpx;
          color: #333333;
          margin-top: 36rpx;
          margin-bottom: 12rpx;
        }

        .tag {
          color: #FFCC00;
          font-size: 28rpx;
        }

        .media {
          margin-top: 26rpx;

          .uploadImg {
            width: 132*2rpx;
          }
        }

        .hashTag {

          height: 40rpx;
          border-radius: 8rpx 20rpx 8rpx 20rpx;
          color: #D93F11;
          font-weight: bold;
          font-size: 20rpx;
          background: rgba(217, 63, 17, 0.1);
          display: inline-block;
          line-height: 40rpx;
          padding: 0rpx 20rpx;
          margin-top: 22rpx;
          margin-bottom: 26rpx;
        }

        .iconsLine {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .eachBox {
            display: flex;
            align-items: center;

            .icon {
              width: 36rpx;
              height: 36rpx;
              margin-right: 14rpx;
            }
          }


        }


      }
    }
  }

  .cart {
    width: 750rpx;
    height: 174rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    position: fixed;
    left: 0rpx;
    bottom: 152rpx;
    padding: 0rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .cartImg {
        width: 104rpx;
        height: 108rpx;
        margin-right: 24rpx;
        position: relative;

        .cartNumber {
          position: absolute;
          right: 0rpx;
          top: 0rpx;
          width: 35rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          background: #DC0F11;
          border-radius: 18rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 700;
          font-size: 20rpx;
          color: #FFFFFF;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }

      .price {
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 40rpx;
        color: #D93F11;

        span {
          font-size: 20rpx;
        }
      }
    }

    .right {
      width: 188rpx;
      height: 98rpx;
      line-height: 98rpx;
      text-align: center;
      background: #FECF01;
      box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-family: OPPOSans, OPPOSans;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .cartDetailMask {
    width: 750rpx;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0rpx;
    display: flex;
    flex-direction: column;
    z-index: 999;

    .cartMask {
      width: 100%;
      flex: 1;
    }

    .cartDetail {
      padding: 22rpx;
      width: 750rpx;
      height: 1424rpx;
      background: #F5F6F8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      position: absolute;

      bottom: 0rpx;
      left: 0rpx;

      .head {
        display: flex;
        padding: 0rpx 32rpx;
        justify-content: space-between;

        span {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 36rpx;
          color: #333333;
        }

        image {
          width: 46rpx;
          height: 44rpx;
        }
      }

      .addressBox {
        width: 708rpx;
        height: 294rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 30rpx;
        padding: 26rpx 32rpx;

        .line1 {
          display: flex;
          align-items: center;

          .shop {
            width: 48rpx;
            height: 48rpx;
            margin-right: 14rpx;
          }

          .shopName {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }
        }

        .line2 {
          margin-top: 6rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
          line-height: 50rpx
        }

        .line3 {
          margin-top: 28rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 16rpx;
          color: #D93F11;
          width: 128rpx;
          height: 34rpx;
          line-height: 34rpx;
          text-align: center;
          background: rgba(217, 63, 17, 0.1);
          border-radius: 10rpx 10rpx 10rpx 10rpx;
        }

        .line4 {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .shop {
            width: 48rpx;
            height: 48rpx;
            margin-right: 14rpx;
          }

          .shopName {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }

      .tabs {
        display: flex;
        width: 100%;
        height: 78rpx;
        align-items: center;

        .all {
          margin-right: 36rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 28rpx;
          color: rgba(51, 51, 51, 0.6);
        }

        .selected {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          border-bottom: 2rpx solid #FECF01;
        }
      }

      .products {
        width: 100%;
        padding: 42rpx 22rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        background: #FFFFFF;
        .fixHeight{
          width: 750rpx;
          height: 580rpx;
          overflow-y: auto;
        }
        .eachProduct {
          display: flex;
          position: relative;
          margin-bottom: 30rpx;

          .right {
            .nameLine {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 32rpx;
              color: #333333;
            }

            .price {
              margin-top: 18rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 28rpx;
              color: #D93F11;

              span {
                font-family: Inter, Inter;
                font-weight: 400;
                font-size: 28rpx;
                color: #828282;
              }
            }

            .disc {
              margin-top: 14rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 24rpx;
              color: #BDBDBD;
              text-decoration-line: line-through;

              .label {
                width: 62rpx;
                height: 32rpx;
                line-height: 32rpx;
                text-align: center;
                background: #FFFFFF;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                border: 1rpx solid #FECF01;
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                font-size: 20rpx;
                color: #FECF01;
              }
            }
          }

          .pic {
            width: 158rpx;
            height: 158rpx;
            margin-right: 38rpx;
          }

          .numLine {
            display: flex;
            position: absolute;
            bottom: 0rpx;
            right: 0rpx;

            .add,
            .subtraction {
              width: 70rpx;
              height: 70rpx;
              background: #F4F4F2;
              border-radius: 10rpx;
              text-align: center;
              line-height: 70rpx;
            }

            .currentNum {
              min-width: 70rpx;
              height: 70rpx;
              line-height: 70rpx;
              text-align: center;
              background: #FECF01;
              border-radius: 15rpx;
              margin: 0rpx 18rpx;
            }
          }
        }

        .borderLine {
          width: 644rpx;
          height: 2rpx;
          border: 2rpx solid #D8D8D8;
        }

        .bottom {
          display: flex;
          height: 158rpx;
          align-items: center;
          justify-content: space-between;

          .left {
            display: flex;
            align-items: center;

            .cartFull {
              width: 52rpx;
              height: 52rpx;
            }

            .grey {
              font-weight: 500;
              font-size: 28rpx;
              color: #9E9E9E;
              margin-left: 20rpx;
              margin-right: 34rpx;
            }

            .price {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 40rpx;
              color: #D93F11;

              span {
                font-size: 20rpx;

              }
            }
          }

          .right {
            width: 188rpx;
            height: 98rpx;
            line-height: 98rpx;
            text-align: center;
            background: #FECF01;
            box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
          }
        }
      }
    }
  }


  .mask {
    width: 750rpx;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0rpx;
    display: flex;
    flex-direction: column;
    z-index: 999;

    .topMask {
      width: 750rpx;
      height: 506rpx;
    }

    .productDetail {
      width: 750rpx;
      flex: 1;
      background: #FFFFFF;
      overflow-y: auto;

      .scrollBox {
        width: 750rpx;
        display: flex;
        flex-direction: column;
        /* background: rgba(0, 0, 0, 0.3); */
        .goodsImg {
          width: 750rpx;
          height: 684rpx;
          border-radius: 60rpx 60rpx 0rpx 0rpx;
        }

        .goodsInfo {
          width: 750rpx;
          height: 204rpx;
          background: rgba(246, 246, 248, 1);
          padding: 54rpx 30rpx 0rpx;
          display: flex;
          justify-content: space-between;

          .left {
            .price {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 48rpx;
              color: #D93F11;
              margin-bottom: 34rpx;

              span {
                font-size: 24rpx;
              }
            }

            .type {
              width: 79rpx;
              height: 44rpx;
              line-height: 44rpx;
              text-align: center;
              background: rgba(217, 63, 17, 0.2);
              border-radius: 10rpx 10rpx 10rpx 10rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 26rpx;
              color: #D93F11;
            }
          }

          .right {
            .saleVolume {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 24rpx;
              color: #999999;
              margin-bottom: 25rpx;
            }

            .numLine {
              display: flex;

              .add,
              .subtraction {
                width: 70rpx;
                height: 70rpx;
                background: #F4F4F2;
                border-radius: 10rpx;
                text-align: center;
                line-height: 70rpx;
              }

              .currentNum {
                min-width: 70rpx;
                height: 70rpx;
                line-height: 70rpx;
                text-align: center;
                background: #FECF01;
                border-radius: 15rpx;
                margin: 0rpx 18rpx;
              }
            }
          }

        }

        .goodsInfo1 {
          width: 750rpx;
          height: 288rpx;

          box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);
          border-radius: 20rpx 20rpx 20rpx 20rpx;

          .line1 {
            height: 204rpx;
            width: 750rpx;
            padding: 40rpx 56rpx;

            .name {
              font-family: OPPOSans, OPPOSans;
              font-weight: 700;
              font-size: 32rpx;
              color: #333333;
              margin-bottom: 50rpx;
            }

            .addr {
              font-family: Poppins, Poppins;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }

          .line2 {
            width: 750rpx;
            height: 84rpx;
            line-height: 84rpx;
            background: #f6f6f8;
            font-family: Poppins, Poppins;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.6);
            text-align: center;

          }
        }

        .comments {
          width: 750rpx;
          height: 588rpx;
          background: #FFFFFF;
          padding: 20rpx 54rpx;

          .line1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .left {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            .right {
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(51, 51, 51, 0.6);
            }
          }

          .line2 {
            display: flex;

            .type {
              margin-right: 20rpx;
              height: 32rpx;
              display: flex;
              align-items: center;
              padding: 0rpx 5rpx;
              border-radius: 4rpx 4rpx 4rpx 4rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 20rpx;
              color: #333333;

              image {
                width: 24rpx;
                height: 24rpx;
              }
            }

            .yellow {
              background: rgba(254, 207, 1, 0.2);
            }

            .grey {
              background: rgba(51, 51, 51, 0.2);
            }
          }

          .line3 {
            margin-top: 60rpx;

            .comment {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                display: flex;

                .headportrait {
                  width: 90rpx;
                  height: 90rpx;
                }

                .center {
                  margin-left: 20rpx;

                  .name {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #333333;
                  }

                  .likeBox {
                    margin-top: 15rpx;
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    font-size: 16rpx;
                    color: rgba(51, 51, 51, 0.6);
                    display: flex;
                    align-items: center;

                    .like {
                      width: 24rpx;
                      height: 24rpx;
                      margin-right: 15rpx;
                    }
                  }

                  .text {
                    margin-top: 15rpx;
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #333333;
                  }
                }
              }

              .right {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: #9E9E9E;
              }
            }

            .second {
              margin-top: 80rpx;
            }
          }

          .line4 {
            width: 654rpx;
            height: 78rpx;
            line-height: 78rpx;
            text-align: center;
            background: #F6F6F8;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
            margin-top: 30rpx;
          }
        }

        .questions {
          height: 224rpx;
          width: 750rpx;
          margin-top: 20rpx;
          background: #FFFFFF;
          padding: 30rpx 50rpx 20rpx 70rpx;

          .line1 {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;

              span {
                color: rgba(246, 246, 248, 1);
              }
            }

            .right {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 20rpx;
              color: rgba(51, 51, 51, 0.8);
            }
          }

          .line2 {
            .question {
              margin-top: 20rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                display: flex;

                .wen {
                  width: 32rpx;
                  height: 32rpx;
                  margin-right: 10rpx;
                }

                span {
                  font-family: OPPOSans, OPPOSans;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #333333;
                }
              }

              .right {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 20rpx;
                color: rgba(51, 51, 51, 0.6);
              }
            }
          }
        }

        .details {
          width: 750rpx;
          height: 368rpx;
          background: #FFFFFF;
          padding: 30rpx 70rpx;

          .line1 {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .line2 {
            width: 100%;
            height: 305rpx;
            margin-top: 25rpx;
            background: rgba(246, 246, 248, 1);
            padding: 50rpx 20rpx;

            .detail {
              margin-bottom: 25rpx;

              .name {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);
                line-height: 32rpx;
                width: 120rpx;
                display: inline-block;
              }

              .value {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;

              }
            }
          }
        }
        .images{
          image{
            width: 750rpx;
          }
        }
        .zhanwei{
          width: 750rpx;
          height: 166rpx;
        }
      }
    }
  }


  .zhanwei {
    width: 750rpx;
    height: 172rpx;
    background: #F4F4F2;
  }

  /deep/ .arrow-area {
    display: none;
  }

  /deep/ .input-value-border {
    border: none
  }

  /deep/ .placeholder {
    font-size: 29rpx;
    color: #333;
  }

  /deep/ .input-value {
    padding-right: 34rpx;
    padding-left: 10rpx;
  }

  /deep/ .is-input-border {
    border-radius: 20rpx;
  }

  /deep/.uni-data-tree {
    .uni-data-tree-input {
      .input-value {
        padding: 0rpx;
        line-height: 35rpx;

        .selected-area {
          .selected-list {
            .selected-item {
              display: none;

              &:last-child {
                display: block !important;
              }

              .text-color {
                color: #333;
                font-size: 30rpx;
                font-weight: 500;
              }

              /* &:nth-child(2) {
                                display: block !important;
                            } */
            }
          }
        }
      }

      .input-value-border {}
    }
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
</style>